<template>
	<view>
		<!-- tab -->
		<view class="index-tabs">
			<view class='active' v-for="(item,index) in tabList" :key="index">
				<view :class="{texted:currentTab == index }" :data-tab="item.value" @click="switchTab(index)">
					{{item.name}}
				</view>
				<view class="active-xian" v-if="currentTab == index "></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="tab-content">
			<view>
				<!-- 待付款 -->
				<view class="content_List">
					<view class="order-content">
						<view class="order-num">
							<view class="num-text">订单编号：1234567889</view>
							<view class="num-tishi">待付款</view>
						</view>
						<view class="order-msg">
							<image src="/static/image/logo.jpg" mode="" class="msg-img"></image>
							<view class="msg-infotxt">
								<view class="info-title">头部舒缓按摩</view>
								<view class="info-content">按摩头部可以促进我们的大脑放松，压力大的时候按摩一下促进脑部血液循环...</view>
								<view class="info-money">
									<view style="font-size:24rpx;color:red;margin-top: 8rpx;">￥</view>
									<view style="font-size:32rpx;color:red;">50/人均</view>
									<view style="font-size:20rpx;color:#999;margin-left:16rpx;margin-top: 8rpx;">已售50+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-btn">
						<view class="close-order" @click="cancleOrder">取消订单</view>
						<view class="pay-order" @click="handleOrderStatus">去付款</view>
					</view>
				</view>
				<!-- 待消费 -->
				<view class="content_List">
					<view class="order-content">
						<view class="order-num">
							<view class="num-text">订单编号：1234567889</view>
							<view class="num-tishi">待消费</view>
						</view>
						<view class="order-msg">
							<image src="/static/image/logo.jpg" mode="" class="msg-img"></image>
							<view class="msg-infotxt">
								<view class="info-title">头部舒缓按摩</view>
								<view class="info-content">按摩头部可以促进我们的大脑放松，压力大的时候按摩一下促进脑部血液循环...</view>
								<view class="info-money">
									<view style="font-size:24rpx;color:red;margin-top: 8rpx;">￥</view>
									<view style="font-size:32rpx;color:red;">50/人均</view>
									<view style="font-size:20rpx;color:#999;margin-left:16rpx;margin-top: 8rpx;">已售50+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-btn">
						<view class="close-order">取消订单</view>
						<view class="pay-order" @click="payedOrder">已消费</view>
					</view>
				</view>
				<!-- 交易完成 -->
				<view class="content_List">
					<view class="order-content">
						<view class="order-num">
							<view class="num-text">订单编号：1234567889</view>
							<view class="num-tishi">交易完成</view>
						</view>
						<view class="order-msg">
							<image src="/static/image/logo.jpg" mode="" class="msg-img"></image>
							<view class="msg-infotxt">
								<view class="info-title">头部舒缓按摩</view>
								<view class="info-content">按摩头部可以促进我们的大脑放松，压力大的时候按摩一下促进脑部血液循环...</view>
								<view class="info-money">
									<view style="font-size:24rpx;color:red;margin-top: 8rpx;">￥</view>
									<view style="font-size:32rpx;color:red;">50/人均</view>
									<view style="font-size:20rpx;color:#999;margin-left:16rpx;margin-top: 8rpx;">已售50+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-btn onebtn">
						<view class="close-order" @click="deleteOrder">删除订单</view>
					</view>
				</view>

				<!-- 交易关闭 -->
				<view class="content_List">
					<view class="order-content">
						<view class="order-num">
							<view class="num-text">订单编号：1234567889</view>
							<view class="num-tishi">交易关闭</view>
						</view>
						<view class="order-msg">
							<image src="/static/image/logo.jpg" mode="" class="msg-img"></image>
							<view class="msg-infotxt">
								<view class="info-title">头部舒缓按摩</view>
								<view class="info-content">按摩头部可以促进我们的大脑放松，压力大的时候按摩一下促进脑部血液循环...</view>
								<view class="info-money">
									<view style="font-size:24rpx;color:red;margin-top: 8rpx;">￥</view>
									<view style="font-size:32rpx;color:red;">50/人均</view>
									<view style="font-size:20rpx;color:#999;margin-left:16rpx;margin-top: 8rpx;">已售50+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-btn">
						<view class="close-order">取消订单</view>
						<view class="pay-order">去下单</view>
					</view>
				</view>

				<!-- 退款中 -->
				<view class="content_List">
					<view class="order-content">
						<view class="order-num">
							<view class="num-text">订单编号：1234567889</view>
							<view class="num-tishi">退款中</view>
						</view>
						<view class="order-msg">
							<image src="/static/image/logo.jpg" mode="" class="msg-img"></image>
							<view class="msg-infotxt">
								<view class="info-title">头部舒缓按摩</view>
								<view class="info-content">按摩头部可以促进我们的大脑放松，压力大的时候按摩一下促进脑部血液循环...</view>
								<view class="info-money">
									<view style="font-size:24rpx;color:red;margin-top: 8rpx;">￥</view>
									<view style="font-size:32rpx;color:red;">50/人均</view>
									<view style="font-size:20rpx;color:#999;margin-left:16rpx;margin-top: 8rpx;">已售50+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-btn onebtn">
						<view class="close-order">查看订单</view>
					</view>
				</view>

				<!-- 已退款 -->
				<view class="content_List">
					<view class="order-content">
						<view class="order-num">
							<view class="num-text">订单编号：1234567889</view>
							<view class="num-tishi">已退款</view>
						</view>
						<view class="order-msg">
							<image src="/static/image/logo.jpg" mode="" class="msg-img"></image>
							<view class="msg-infotxt">
								<view class="info-title">头部舒缓按摩</view>
								<view class="info-content">按摩头部可以促进我们的大脑放松，压力大的时候按摩一下促进脑部血液循环...</view>
								<view class="info-money">
									<view style="font-size:24rpx;color:red;margin-top: 8rpx;">￥</view>
									<view style="font-size:32rpx;color:red;">50/人均</view>
									<view style="font-size:20rpx;color:#999;margin-left:16rpx;margin-top: 8rpx;">已售50+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-btn onebtn">
						<view class="close-order">删除订单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: '全部',
						value: 0
					},
					{
						name: '待付款',
						value: 1
					},
					{
						name: '待消费',
						value: 2
					},
					{
						name: '交易完成',
						value: 3
					},
					{
						name: '交易关闭',
						value: 4
					},



				],
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			handleOrderStatus() {
				this.$helper.to('/pages/tabBar/activity/oderStatus/oderStatus')
			},
			// 取消订单
			cancleOrder() {
				uni.showModal({
					title: '提示',
					content: '是否取消该订单?',
					confirmColor: "#000000",
					cancelColor: "#999999",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除订单
			deleteOrder() {
				uni.showModal({
					title: '提示',
					content: '是否删除该订单?',
					confirmColor: "#000000",
					cancelColor: "#999999",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//去下单
			// payingOrder(){
			// 	this.$helper.to('/pages/tabBar/index/pay')
			// },
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.normaltxt {
		text-align: center;
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		margin: 86rpx 0;
	}

	.index-tabs {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 30rpx;
		background: #fff;
		padding-bottom: 20rpx;
	}

	.active-xian {
		width: 40rpx;
		height: 6rpx;
		background: #000;
		margin: 0 auto;
	}

	.active {
		font-size: 30rpx;
		color: #999;
	}

	.texted {
		font-size: 30rpx;
		color: #000;
		margin-bottom: 8rpx;
	}

	.content_List {
		background: #fff;
		margin-top: 24rpx;
		height: 414rpx;
	}

	.order-content {
		margin: 0 30rpx;

		.order-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 30rpx;
		}

		.num-text {
			font-size: 28rpx;
			color: #999;
		}

		.num-tishi {
			font-size: 28rpx;
			color: #000;
		}

		.order-msg {
			display: flex;
			margin-top: 30rpx;
		}

		.msg-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}

		.msg-infotxt {
			margin-left: 24rpx;
		}

		.info-title {
			font-size: 30rpx;
			color: #000;
		}

		.info-content {
			font-size: 24rpx;
			color: #999;
			margin-top: 24rpx;
			width: 456rpx;
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical
		}

		.info-money {
			display: flex;
			margin-top: 30rpx;
		}

	}

	.order-btn {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		margin-left: 344rpx;
	}

	.onebtn {
		margin-left: 544rpx
	}

	.close-order {
		width: 176rpx;
		height: 66rpx;
		border-radius: 34rpx;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		color: #999;
		font-size: 24rpx;
		line-height: 66rpx;
	}

	.pay-order {
		width: 176rpx;
		height: 66rpx;
		background: #000000;
		border-radius: 34rpx;
		text-align: center;
		color: #FEC92F;
		font-size: 24rpx;
		line-height: 66rpx;
		margin-left: 24rpx;
	}
</style>